<template>
  <a-form
    ref="formRef"
    :model="formData"
    class="form"
    :label-col-props="{ span: 8 }"
    :wrapper-col-props="{ span: 16 }"
  >
    <a-form-item
      field="first_name"
      label="姓氏"
      :rules="[
        {
          required: true,
          message: '请输入您的姓氏',
        },
      ]"
    >
      <a-input v-model="formData.first_name" placeholder="请输入您的姓氏" />
    </a-form-item>
    <a-form-item
      field="last_name"
      label="名字"
      :rules="[
        {
          required: true,
          message: '请输入您的名字',
        },
      ]"
    >
      <a-input v-model="formData.last_name" placeholder="请输入您的名字" />
    </a-form-item>
    <a-form-item
      field="email"
      label="邮箱"
      :rules="[
        {
          required: true,
          message: '请输入邮箱',
        },
      ]"
    >
      <a-input
        v-model="formData.email"
        placeholder="请输入邮箱地址，如xxx{'@'}bytedance.com"
      />
    </a-form-item>
    <a-form-item
      field="mobile"
      label="手机"
      :rules="[{ required: true, message: 'mobile is required' }]"
      :validate-trigger="['change', 'input']"
    >
      <a-input
        hide-button="false"
        allow-clear
        v-model.number="formData.mobile"
        placeholder="请输入手机号"
      />
    </a-form-item>
    <a-form-item field="gender" label="性别" :rules="[{ required: true }]">
      <a-radio-group v-model="formData.gender">
        <a-radio :value="1">男</a-radio>
        <a-radio :value="0">女</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="primary" @click="validate"> 保存 </a-button>
        <a-button type="secondary" @click="reset"> 重置 </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { BasicInfoModel } from '@/api/user-center';
import { updateUserInfo } from '@/api/user';
import { Message } from '@arco-design/web-vue';

const formRef = ref<FormInstance>();
const formData = ref<BasicInfoModel>({
  email: '',
  first_name: '',
  last_name: '',
  mobile: '',
  gender: 1,
});
const validate = async () => {
  const res = await formRef.value?.validate();
  if (!res) {
    try {
      await updateUserInfo(formData.value);
      Message.success('更新用户信息成功');
      formRef.value?.resetFields();
    } catch (error) {}
  }
};
const reset = async () => {
  await formRef.value?.resetFields();
};
</script>

<style scoped lang="less">
.form {
  width: 540px;
  margin: 0 auto;
}
</style>
